<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>我的地址</title>
<meta name="keywords"  content="KEYWORDS..." />
<meta name="description" content="DESCRIPTION..." />
<meta name="author" content="DeathGhost" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name='apple-touch-fullscreen' content='yes'>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="address=no">
<link rel="icon" href="/1/images/icon/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="/1/images/icon/apple-touch-icon-57x57-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="/1/images/icon/apple-touch-icon-120x120-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="196x196" href="/1/images/icon/apple-touch-icon-196x196-precomposed.png">
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="/1/css/style.css" />
<script src="/1/js/jquery.js"></script>
<script src="/vendor/layer/layer.js"></script>
    <style>
        .userForm li .formLastBtn{width: 30%;margin-left:2%;font-size:.28rem;}
    </style>
</head>
<body>
<!--header-->
<header>
 <a href="javascript:history.go(-1);" class="iconfont backIcon">&#60;</a>
 <h1>收货地址</h1>
</header>
<div style="height:1rem;"></div>
<form action="" onsubmit="return false" id="data-form">
    <input type="hidden" name="id" value="{{$address['id'] or ''}}">
<ul class="userForm">
    <li>
        <input type="text" name="name" value="{{$address['name'] or ''}}" placeholder="收货人姓名"/>
    </li>
    <li>
        <input type="text" name="mobile" value="{{$address['mobile'] or ''}}" placeholder="收货人手机号"/>
    </li>
 <li>
  <select name="province_id" id="province" onchange="loadCityList(this.value)">
      <option value="">请选择省份</option>
      @foreach($provinces as $k => $v)
          <option value="{{$k}}" {{isset($address['province_id']) && $address['province_id'] == $k ? 'selected' : ''}}>{{$v}}</option>
      @endforeach
  </select>
 </li>
 <li>
  <select name="city_id" id="city">
      <option value="">请选择城市</option>
  </select>
 </li>
 <li>
     <input type="text" name="district" value="{{$address['district'] or ''}}" placeholder="请输入区域"/>
 </li>
 <li>
  <textarea placeholder="请输入详细地址" name="detail">{{$address['detail'] or ''}}</textarea>
 </li>
 <li>
  <input type="button" value="保存地址" onclick="saveData()" class="formLastBtn"/>
     @if(!empty($address['id']))
         <input type="button" value="设为默认地址" onclick="setDefault('{{$address['id']}}')" class="formLastBtn"/>
         <input type="button" value="删除地址" onclick="delData('{{$address['id']}}')" class="formLastBtn" style="background-color:#d9534f;"/>
     @endif
 </li>
</ul>
</form>
<script>
    var province_id = '{{$address['province_id'] or ''}}';
    var city_id = '{{$address['city_id'] or ''}}';
    $(function () {
        if (province_id)
            loadCityList(province_id);
    });

    function saveData() {
        $.post('', $('#data-form').serialize(), function (res) {
            if (res.status === 1) {
                layer.msg(res.info, {time: 1200}, function () {
                    location.href=document.referrer;
                });
            } else {
                layer.msg(res.info, {time: 1500});
            }
        });
    }

    // 设为默认收货地址
    function setDefault(id) {
        $.post('/home/user/addressSet', {id: id}, function () {
            layer.msg('设置成功', {time: 1200}, function () {
                location.href=document.referrer;
            });
        });
    }

    // 删除
    function delData(id) {
        if (confirm('确定要删除吗')) {
            $.post('/home/user/addressDel', {id: id}, function () {
                layer.msg('删除成功', {time: 1200}, function () {
                    location.href=document.referrer;
                });
            });
        }
    }

    // 加载市
    function loadCityList(pid) {
        var htmlContent = '<option value="">请选择城市</option>';
        if (pid) {
            $.get('{{url('api/area/getCityList')}}', {pid: pid}, function (res) {
                for (var i = 0; i < res.length; i++) {
                    htmlContent += '<option value="' + res[i].id + '">' + res[i].name + '</option>';
                }
                $('#city').html(htmlContent).val(city_id);
            });
        } else {
            $('#city').html(htmlContent);
        }
    }
</script>
</body>
</html>
